<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">{{ datas.processDefinitionName }}详情</span>
          <el-tag v-if="datas.processInstanceStatus==='ACTIVE'" type="warning" size="small">审核中
          </el-tag>
          <el-tag v-if="datas.processInstanceStatus==='COMPLETED'" type="warning" size="small">
            {{ getLabel('approval_result', datas.processInstanceConclusion) }}
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回
        </el-button>
        <template v-if="datas && datas.processInstanceStatus==='ACTIVE'">
          <el-button v-auth="{v:['crm:audit:myDealWith:undo'],bool:datas?.cancel}" type="primary" size="small"
            @click="cancelOperation">撤销
          </el-button>

          <el-button v-auth="{v:['crm:audit:myDealWith:approval'],bool:datas?.allow}" type="primary" size="small"
            @click="handlApproval">审批
          </el-button>
        </template>
      </template>
    </header-module>
    <div class="main-content">
      <el-tabs v-model="activeName" class="elTabs" @tab-click="tabClick">
        <el-tab-pane label="流程信息" name="1">
          <component :is="isComponent" :detail-data="datas" />
        </el-tab-pane>
        <el-tab-pane label="审批记录" name="2">
          <approval-record :list="datas.taskHistoryList" />
          <!-- <xml :id="route.query.xmlId" /> -->
        </el-tab-pane>
      </el-tabs>
      <approval-dialog ref="bouncedDialog" @succsess="succsess" />
    </div>

  </div>
</template>

<script>
import {
  computed,
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  components: {
    // 产品审批--创建、编辑
    productBaseInfo: defineAsyncComponent(() =>
      import("../../modules/product/productBaseInfo.vue")
    ),
    // 产品下架审批
    productDownInfo: defineAsyncComponent(() =>
      import("../../modules/product/productDownInfo.vue")
    ),
    // 产品审批--变更
    productChangeInfo: defineAsyncComponent(() =>
      import("../../modules/product/productChangeInfo.vue")
    ),
    // 新建产品价格审批
    createProductPriceInfo: defineAsyncComponent(() =>
      import("../../modules/product/createProductPriceInfo.vue")
    ),
    // 变更产品终端价审批
    changeProductPriceInfo: defineAsyncComponent(() =>
      import("../../modules/product/changeProductPriceInfo.vue")
    ),
    // 作废产品终端价审批
    obsoleteProductPriceInfo: defineAsyncComponent(() =>
      import("../../modules/product/obsoleteProductPriceInfo.vue")
    ),
    // 修改交易终端价
    changeTradingPrice: defineAsyncComponent(() =>
      import("../../modules/product/changeTradingPrice.vue")
    ),
    // 新建配送商审批
    distributorInfo: defineAsyncComponent(() =>
      import("../../modules/distributor/distributorInfo.vue")
    ),
    // 配送商变更审批
    distributorChangeInfo: defineAsyncComponent(() =>
      import("../../modules/distributor/distributorChangeInfo.vue")
    ),
    // 新建配送服务审批
    distributorServiceInfo: defineAsyncComponent(() =>
      import("../../modules/distributor/distributorServiceInfo.vue")
    ),
    // 配送服务配送费变更审批
    distributorServicePriceChange: defineAsyncComponent(() =>
      import("../../modules/distributor/distributorServicePriceChange.vue")
    ),
    // 作废配送服务审批
    distributorServiceObsoleteInfo: defineAsyncComponent(() =>
      import("../../modules/distributor/distributorServiceObsoleteInfo.vue")
    ),
    // 配送商添加终端审批
    distributorServiceAddTerminal: defineAsyncComponent(() =>
      import("../../modules/distributor/distributorServiceAddTerminal.vue")
    ),
    // 配送商添加终端审批
    distributorServiceAddTerminal2: defineAsyncComponent(() =>
      import("../../modules/distributor/distributorServiceAddTerminal2.vue")
    ),
    // 配送商交易终端变更审批
    distributorTradingTerminalChange: defineAsyncComponent(() =>
      import("../../modules/distributor/distributorTradingTerminalChange.vue")
    ),
    // 配送商回款审批
    returnedMoney: defineAsyncComponent(() =>
      import("../../modules/distributor/returnedMoney.vue")
    ),
    // 配送商流向记录
    flowDirection: defineAsyncComponent(() =>
      import("../../modules/distributor/flowDirection.vue")
    ),
    // 市场准入计划
    planInfo: defineAsyncComponent(() =>
      import("../../modules/business/planInfoView.vue")
    ),
    // 代理产品创建
    addProductAndPrice: defineAsyncComponent(() =>
      import("../../modules/channel/signedAgent/addProductAndPrice.vue")
    ),
    // 代理产品创建
    addProductAndPrice2: defineAsyncComponent(() =>
      import("../../modules/channel/signedAgent/addProductAndPrice2.vue")
    ),
    // 代理产品变更
    changeProductAndPrice: defineAsyncComponent(() =>
      import("../../modules/channel/signedAgent/changeProductAndPrice.vue")
    ),
    // 代理产品变更
    cancellationProductAndPrice: defineAsyncComponent(() =>
      import(
        "../../modules/channel/signedAgent/cancellationProductAndPrice.vue"
      )
    ),

    registerTerminal: defineAsyncComponent(() =>
      import("../../modules/terminal/registerTerminal.vue")
    ), // 终端注册审批
    terminalQuaCheck: defineAsyncComponent(() =>
      import("../../modules/terminal/terminalQuaCheck.vue")
    ), // 终端资质信息审批
    terminalDistribution: defineAsyncComponent(() =>
      import("../../modules/terminal/terminalDistribution.vue")
    ), // 终端设置配送信息审批
    contractCreate: defineAsyncComponent(() =>
      import("../../modules/contract/index.vue")
    ), // 合同审批
    agentConstruction: defineAsyncComponent(() =>
      import("../../modules/channel/agentConstruction.vue")
    ), // 新建代理商审批
    agentOpen: defineAsyncComponent(() =>
      import("../../modules/channel/agentSigningAccount.vue")
    ), // 潜在代理商签约开户审批
    partTimeBigBagEdit: defineAsyncComponent(() =>
      import("../../modules/channel/partTimeBigBagEdit.vue")
    ), // 编辑(新建)兼职大包审批

    // 信用设置
    creditSetting: defineAsyncComponent(() =>
      import("../../modules/credit/creditSetting.vue")
    ),
    // 信用变更
    creditChange: defineAsyncComponent(() =>
      import("../../modules/credit/creditChange.vue")
    ),
    // 代理商变更
    agentChange: defineAsyncComponent(() =>
      import("../../modules/channel/signedAgent/agentChange.vue")
    ),
    // 批量注册终端
    registTerminal: defineAsyncComponent(() =>
      import("../../modules/channel/signedAgent/registTerminal.vue")
    ),
    // 变更注册终端开发信息
    changeTerminalDev: defineAsyncComponent(() =>
      import("../../modules/channel/signedAgent/changeTerminalDev.vue")
    ),
    // 交易价变更
    tradPriceChange: defineAsyncComponent(() =>
      import("../../modules/channel/signedAgent/tradPriceChange.vue")
    ),
    // 新增订单
    addOrder: defineAsyncComponent(() =>
      import("../../modules/orderAndReturned/order/addOrder.vue")
    ),
    // 新建回款审批
    returnedMoneyInfo: defineAsyncComponent(() =>
      import(
        "../../modules/orderAndReturned/returnedAndReceivable/returnedMoneyInfo.vue"
      )
    ),
    // 商业流向审批
    businessFlow: defineAsyncComponent(() =>
      import("../../modules/orderAndReturned/businessFlow/index.vue")
    ),
    // 市场准入创建
    chance: defineAsyncComponent(() =>
      import("../../modules/business/chance.vue")
    ),
    // 交易价变更
    terminalChangeAgent: defineAsyncComponent(() =>
      import("../../modules/channel/signedAgent/terminalChangeAgent.vue")
    ),
    // xml
    xml: defineAsyncComponent(() => import("../../modules/xml/index.vue")),
    // 客户信息资质审批
    customer: defineAsyncComponent(() =>
      import("../../modules/customer/index.vue")
    ),
    // 客户信息新建终端审批
    terminalFrom: defineAsyncComponent(() =>
      import("../../modules/terminal/terminalFrom.vue")
    ),
    //客户信息审批详情页
    agentPartTime: defineAsyncComponent(() =>
      import("../../modules/customer/agentPartTime.vue")
    ),
    //区域添加配送信息
    regionalInfo: defineAsyncComponent(() =>
      import("../../modules/matching/regionalInfo.vue")
    ),
    //区域添加配送终端
    regionalTerminal: defineAsyncComponent(() =>
      import("../../modules/matching/regionalTerminal.vue")
    ),
    //库存盘点审批
    inventory: defineAsyncComponent(() =>
      import("../../modules/returnedRecords/inventory.vue")
    ),
    //商销审核
    shangPin: defineAsyncComponent(() =>
      import("../../modules/shangpin/index.vue")
    ),
    //商销资质审批
    shangPinQualification: defineAsyncComponent(() =>
      import("../../modules/shangpin/qualification.vue")
    ),
    //商销客户要素审核
    businessAgreement: defineAsyncComponent(() =>
      import("../../modules/businessAgreement/index.vue")
    ),
    //营销目标审核
    targetManage: defineAsyncComponent(() =>
      import("../../modules/saleTarget/targetManage.vue")
    ),
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    var reactiveData = reactive({
      activeName: "1",
      bouncedDialog: null,
      currentTask: {
        taskId: route.query.taskId,
        form: {},
      },
      datas: {},
      btnData: {},
    });

    const handlBack = () => {
      router.back();
    };

    const handlTaskId = () => {
      reactiveData.currentTask.form = {
        result: {
          type: String,
          value: "REPEAL",
        },
      };
      // api.approval.APPROVAL_FORM({ taskId: route.query.taskId }).then((res) => {
      //   if (res.code === 0) {
      //     reactiveData.currentTask.form = res.data;
      //     reactiveData.currentTask.form.result.value = "REPEAL";
      //   }
      // });
    };

    const cancelOperation = () => {
      currentInstance.proxy
        .alertBox({ title: "撤销审批", message: "是否确认取消？" })
        .then(() => {
          api.approval.APPROVAL_SUBMIT(reactiveData.currentTask).then((res) => {
            if (res.code === 0) {
              currentInstance.proxy.customMessage({
                type: "success",
                message: "撤销成功",
              });
              handlDetail();
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        });
    };

    const handlDetail = () => {
      var subdata = {
        processInstanceId: route.query.id,
        taskId: route.query.taskId,
      };
      api.myStarted.MYSTARTED_DETAIL(subdata).then((res) => {
        if (res.code === 0) {
          var detail = res.data;
          detail.data = JSON.parse(res.data.data);
          reactiveData.datas = detail;
          // reactiveData.datas = JSON.parse(JSON.stringify(res.data))
          // reactiveData.datas.data = JSON.parse(reactiveData.datas.data)
          console.log(
            reactiveData.datas,
            "---fdsdfdfdsfds----4343433423423-----"
          );
        }
      });
    };

    const handlApproval = () => {
      reactiveData.bouncedDialog.open(
        reactiveData.currentTask,
        reactiveData.datas
      );
    };

    // 计算
    const isComponent = computed(() => {
      let componentName = "";
      var flowKey = route.query.serviceKey + "-" + route.query.type;
      switch (flowKey) {
        case "ProductService-productCreate":
          componentName = "productBaseInfo";
          break;
        case "ProductService-productDown":
          componentName = "productDownInfo";
          break;
        case "ProductService-productUpdate":
          componentName = "productChangeInfo";
          break;
        case "ProductPriceStrategyService-productPriceCreate":
          componentName = "createProductPriceInfo";
          break;
        case "ProductPriceStrategyService-productPriceChange":
          componentName = "changeProductPriceInfo";
          break;
        case "ProductPriceStrategyService-productPriceBan":
          componentName = "obsoleteProductPriceInfo";
          break;
        case "RelationStandardService-relationStandardChangeTerminalPrice":
          componentName = "changeTradingPrice";
          break;
        // 配送商创建、不通过编辑
        case "DistributeInfoService-setDistributeCheck":
          componentName = "distributorInfo";
          break;
        // 配送商---完善资质审批
        case "DistributeInfoService-distributeQualification":
          componentName = "distributorInfo";
          break;
        // 配送商变更审批
        case "DistributeInfoService-setDistributeUpdateCheck":
          componentName = "distributorChangeInfo";
          break;
        // 配送服务作废审批
        case "DistributeContractDetailService-setDistributeServeInvalidateCheck":
          componentName = "distributorServiceObsoleteInfo";
          break;
        // 配送服务审批
        case "DistributeContractDetailService-setDistributeServeCreateCheck":
          componentName = "distributorServiceInfo";
          break;
        // 配送服务配送费变更审批
        case "DistributeContractDetailService-setDistributeServeUpdatePriceCheck":
          componentName = "distributorServicePriceChange";
          break;
        // 区域招商协议配送终端审批
        // case "DistributeContractDetailService-setAgreementTerminal":
        //   componentName = "distributorServiceAddTerminal2";
        //   break;
        // 配送商关联配送终端审批
        case "DistributeContractDetailService-setDistributeServeAssociationCheck":
          componentName = "distributorServiceAddTerminal";
          break;
        // 配送商交易终端关系变更审批
        case "DistributeContractDetailService-setDistributeServeUpdateTerminalCheck":
          componentName = "distributorTradingTerminalChange";
          break;
        // 招商计划审批
        case "PlanService-planCheck":
          componentName = "planInfo";
          break;
        // 代理产品创建
        case "AgentProductService-agentProductCreate":
          componentName = "addProductAndPrice";
          break;
        // 代理产品创建
        case "AgentProductService-agentPersonProductCreate":
          componentName = "addProductAndPrice";
          break;
        // 代理产品创建
        case "AgentProductService-agentProductCreateWithTerminals":
          componentName = "addProductAndPrice2";
          break;
        // 代理产品变更
        case "AgentProductService-agentProductChangePrice":
          componentName = "tradPriceChange";
          break;
        // 代理产品作废
        case "AgentProductService-agentProductBan":
          componentName = "cancellationProductAndPrice";
          break;
        // 代理产品作废
        case "AgentProductService-agentPersonProductBan":
          componentName = "cancellationProductAndPrice";
          break;
        // 合同审批
        case "ContractService-contractCreate":
          componentName = "contractCreate";
          break;
        // 终端资质审批
        case "TerminalService-terminalQuaCheck":
          componentName = "terminalQuaCheck";
          break;
        // 潜在代理商签约开户审批
        case "AgentService-agentOpen":
          componentName = "agentOpen";
          break;
        // 签约代理商信息变更审批
        // case 'AgentService-agentChange':
        //   componentName = 'agentChange'
        //   break
        // 兼职大包开户
        case "AgentService-agentPersonOpen":
          componentName = "partTimeBigBagEdit";
          break;
        // 兼职大包信息编辑
        case "AgentService-agentPersonChange":
          componentName = "partTimeBigBagEdit";
          break;
        // 信用设置
        case "CreditService-creditCreate":
          componentName = "creditSetting";
          break;
        // 信用变更
        case "CreditService-creditChange":
          componentName = "creditChange";
          break;
        case "OrderService-orderCreate":
          componentName = "addOrder";
          break;
        case "TerminalService-terminalSetAgentCheck":
          componentName = "registTerminal";
          break;
        case "DevService-terminalSetAgentCheck":
          componentName = "registTerminal";
          break;
        case "DevService-terminalSetAgentDirectCheck":
          componentName = "registTerminal";
          break;
        case "DevService-devDirectChange":
          componentName = "changeTerminalDev";
          break;
        // 终端设置配送商审批
        case "TerminalService-terminalSetDistributeCheck":
          componentName = "terminalDistribution";
          break;
        // 新建回款审批审批
        case "FinanceService-returnedMoneyCreate":
          componentName = "returnedMoneyInfo";
          break;
        // 商业流向审批
        case "BusinessFlowService-businessFlow":
          componentName = "businessFlow";
          break;
        // 市场准入
        case "ChanceService-chanceCreate":
          componentName = "chance";
          break;
        // 代理产品创建
        case "AgentProductService-agentPersonProductCreate":
          componentName = "addProductAndPrice";
          break;
        // 代理产品变更
        case "AgentProductService-agentPersonProductChangePrice":
          componentName = "tradPriceChange";
          break;
        // 变更交易精细招商信息
        case "RelationStandardService-relationStandardChangeAgent":
          componentName = "terminalChangeAgent";
          break;
        case "AgentService-agentQualificationCreate":
          componentName = "customer";
          break;
        case "AgentService-agentQualificationChange":
          componentName = "customer";
          break;
        case "TerminalService-terminalCheck":
          componentName = "terminalFrom";
          break;
        case "AgentService-agentCreate":
          componentName = "agentPartTime";
          break;
        case "AgentService-agentChange":
          componentName = "agentPartTime";
          break;
        case "DistributeContractDetailService-setAgentDistribute":
          componentName = "regionalInfo";
          break;
        case "DistributeContractDetailService-setAgreementTerminal":
          componentName = "regionalTerminal";
          break;
        case "monthlyCheckService-monthlyCheck":
          componentName = "inventory";
          break;
        case "SellerService-sellerCreate":
          componentName = "shangPin";
          break;
        case "SellerService-sellerChange":
          componentName = "shangPin";
          break;
        case "SellerService-sellerQualificationCreate":
          componentName = "shangPinQualification";
          break;
        case "SellerService-sellerQualificationChange":
          componentName = "shangPinQualification";
          break;
        case "SellerService-sellerFactorCreate":
          componentName = "businessAgreement";
          break;
        case "SellerService-sellerFactorChange":
          componentName = "businessAgreement";
          break;
        case "SellerService-sellerFactorBan":
          componentName = "businessAgreement";
          break;
        case "TargetService-createTarget":
          componentName = "targetManage";
          break;
        case "TargetService-adjustTarget":
          componentName = "targetManage";
          break;
      }
      return componentName;
    });

    const succsess = () => {
      handlDetail();
      handlTaskId();
    };

    onMounted((_) => {
      handlDetail();
      handlTaskId();
    });

    return {
      ...toRefs(reactiveData),
      isComponent,
      route,
      handlBack,
      handlApproval,
      handlTaskId,
      handlDetail,
      cancelOperation,
      succsess,
    };
  },
};
</script>

<style>
</style>
